<template>
  <div class="fund-scorecard-page">
    <!-- 顶部导航栏 -->
    <div class="page-header">
      <div class="header-content">
        <div class="logo-title">
          <img src="../assets/logo.svg" class="logo-icon" alt="Logo" />
          <h1 class="main-title">基金成绩单（股票型基金版）</h1>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="page-content">
      <!-- 返回按钮和分隔线 -->
      <div class="back-nav">
        <div class="back-button" @click="goBack">
          <span class="back-arrow">⟨</span> 返回列表
        </div>
        <div class="divider"></div>
      </div>

      <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="left-menu">
          <div class="fund-code-panel">
            <div class="code-number">003504</div>
            <div class="fund-name">景顺长城景颐丰利债券A</div>
            <div class="fund-type">股票型</div>
          </div>
          
          <div class="menu-tabs">
            <div class="menu-tab active">
              <img src="../assets/房子.png" alt="基本信息" class="tab-icon" />
              <span>基本信息</span>
            </div>
            <div class="menu-tab">
              <img src="../assets/村委信箱.png" alt="基金评分" class="tab-icon" />
              <span>基金评分</span>
            </div>
          </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="right-content">
          <!-- 基本信息区域 -->
          <div class="info-section">
            <h2 class="section-title">基本信息</h2>
            
            <div class="info-table">
              <div class="info-row">
                <div class="info-label">基金类型：</div>
                <div class="info-value">股票型基金</div>
                <div class="info-label">基金管理人：</div>
                <div class="info-value">景顺长城基金</div>
              </div>
              <div class="info-row">
                <div class="info-label">基金规模：</div>
                <div class="info-value">12.83亿元</div>
                <div class="info-label">成立日：</div>
                <div class="info-value">2017-01-18</div>
              </div>
              <div class="info-row">
                <div class="info-label">基金经理：</div>
                <div class="info-value">杨锐璟</div>
              </div>
            </div>
          </div>
          
          <!-- 评分区域 -->
          <div class="score-section">
            <h2 class="section-title">基金评分</h2>
            
            <div class="score-overview">
              <div class="score-left">
                <div class="star-rating">
                  <span v-for="i in 5" :key="i" :class="['star', i <= 3 ? 'filled' : '']">★</span>
                </div>
                <div class="fund-type-label">稳健型</div>
              </div>
              
              <div class="score-center">
                <div class="total-score">84</div>
                <div class="score-label">综合评分</div>
              </div>
              
              <div class="score-right">
                <div class="sub-score">
                  <div class="score-value">89分</div>
                  <div class="score-type">赚钱能力评分</div>
                </div>
                <div class="sub-score">
                  <div class="score-value">89分</div>
                  <div class="score-type">风险控制能力评分</div>
                </div>
                <div class="sub-score">
                  <div class="score-value">89分</div>
                  <div class="score-type">稳定性能力评分</div>
                </div>
              </div>
            </div>
            
            <!-- 能力分析区域 -->
            <div class="abilities-section">
              <div class="radar-chart-container">
                <div class="radar-label">稳健型</div>
                <svg width="220" height="220" viewBox="0 0 220 220">
                  <!-- 外部五边形 -->
                  <polygon 
                    points="110,10 200,85 165,190 55,190 20,85" 
                    fill="#f5f5f5"
                    stroke="#e0e0e0"
                    stroke-width="1"
                  />
                  <!-- 内部数据五边形 -->
                  <polygon 
                    points="110,50 170,105 145,170 75,170 50,105" 
                    fill="rgba(255,196,102,0.3)"
                    stroke="#ffa500"
                    stroke-width="2" 
                  />
                  <!-- 中心标记 -->
                  <text x="110" y="120" text-anchor="middle" fill="#ff8c00" font-size="14">稳健型</text>
                </svg>
              </div>
              
              <div class="abilities-content">
                <!-- 赚钱能力 -->
                <div class="ability-item">
                  <div class="ability-header">
                    <div class="ability-marker profit"></div>
                    <div class="ability-name">赚钱能力</div>
                    <div class="ability-stars">
                      <span v-for="i in 4" :key="i" class="star filled">★</span>
                      <span class="star">★</span>
                    </div>
                  </div>
                  <div class="ability-details">
                    <div class="detail-row">
                      <div class="detail-left">近1年内收益7.49%，</div>
                      <div class="detail-right">年同期基金收益+42%</div>
                    </div>
                    <div class="detail-row">
                      <div class="detail-left">近3年内收益7.71%，</div>
                      <div class="detail-right">年同期基金收益+42%</div>
                    </div>
                    <div class="detail-row">
                      <div class="detail-left">景颐丰利返：</div>
                      <div class="detail-right">在同期基金中排名22%</div>
                    </div>
                  </div>
                </div>
                
                <!-- 风险控制能力 -->
                <div class="ability-item">
                  <div class="ability-header">
                    <div class="ability-marker risk"></div>
                    <div class="ability-name">风险控制能力</div>
                    <div class="ability-warning">⚠️</div>
                    <div class="ability-stars">
                      <span v-for="i in 3" :key="i" class="star filled">★</span>
                      <span v-for="i in 2" :key="i+3" class="star">★</span>
                    </div>
                  </div>
                  <div class="ability-details">
                    <div class="detail-row">
                      <div class="detail-left">近1年内波动7.49%，最大回撤指数7.49%，</div>
                      <div class="detail-right">年同期最大回撤+42%</div>
                    </div>
                    <div class="detail-row">
                      <div class="detail-left">近3年内波动7.71%，最大回撤指数7.7%，</div>
                      <div class="detail-right">年同期最大回撤+6%</div>
                    </div>
                    <div class="detail-row">
                      <div class="detail-left">这支钱，波动相对小，整体比大盘（比较沪深300）波动性低。</div>
                      <div class="detail-right">风险回撤排名40+</div>
                    </div>
                  </div>
                </div>
                
                <!-- 稳定性能力 -->
                <div class="ability-item">
                  <div class="ability-header">
                    <div class="ability-marker stability"></div>
                    <div class="ability-name">稳定性能力</div>
                    <div class="ability-stars">
                      <span v-for="i in 3" :key="i" class="star filled">★</span>
                      <span v-for="i in 2" :key="i+3" class="star">★</span>
                    </div>
                  </div>
                  <div class="ability-details">
                    <div class="detail-row">
                      <div class="detail-left">在弱市场，表现胜于同类，收益稳定</div>
                      <div class="detail-right">综合排名+40%</div>
                    </div>
                    <div class="detail-row">
                      <div class="detail-left">基金比同类型的更稳定，表现突出</div>
                      <div class="detail-right">排名前35%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 客服图标 -->
    <div class="customer-service" @click="showCustomerServiceDialog">
      <div class="service-icon-container">
        <div class="service-icon-wrapper">
          <img src="../assets/小鸡客服.svg" alt="客服" />
        </div>
        <div class="service-label">客服基基</div>
      </div>
    </div>
    
    <!-- 客服弹窗 -->
    <div class="service-dialog" v-if="isServiceDialogVisible" @click.self="hideCustomerServiceDialog">
      <div class="service-dialog-content">
        <div class="service-dialog-header">
          <div class="service-dialog-title">
            <img src="../assets/小鸡客服.svg" alt="客服" class="service-dialog-icon" />
            <span>智能基基</span>
          </div>
          <div class="service-dialog-close" @click="hideCustomerServiceDialog">×</div>
        </div>
        <div class="service-dialog-body">
          <div class="chat-messages">
            <div class="chat-message chat-message-ai">
              <p>你好，我是智能客服，有什么可以帮你～</p>
            </div>
            <div v-if="selectedQuestion" class="chat-message chat-message-user">
              <p>{{ selectedQuestion }}</p>
            </div>
            <div v-if="selectedQuestion" class="chat-message chat-message-ai">
              <p v-if="selectedQuestion === '股票型基金是什么？'">
                股票型基金是以投资为主要股票类别的（通常80%以上资产配置股票）的基金产品。
              </p>
              <p v-else>我正在查询相关信息，请稍等...</p>
            </div>
          </div>
        </div>
        <div class="service-quick-options">
          <div class="quick-option" 
               :class="{ 'active': selectedQuestion === '股票型基金是什么？' }" 
               @click="selectOption('股票型基金是什么？')">
            股票型基金是什么？
          </div>
          <div class="quick-option" 
               :class="{ 'active': selectedQuestion === '什么能力看出这个水平' }" 
               @click="selectOption('什么能力看出这个水平')">
            什么能力看出这个水平
          </div>
          <div class="quick-option" 
               :class="{ 'active': selectedQuestion === '收益大多靠基管平？' }" 
               @click="selectOption('收益大多靠基管平？')">
            收益大多靠基管平？
          </div>
          <div class="quick-option" 
               :class="{ 'active': selectedQuestion === '股票型基金到底还是股票' }" 
               @click="selectOption('股票型基金到底还是股票')">
            股票型基金到底还是股票
          </div>
        </div>
        <div class="service-dialog-footer">
          <input type="text" placeholder="输入你的问题" v-model="userQuestion" @keyup.enter="sendQuestion" />
          <button @click="sendQuestion">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const fundCode = ref(route.params.fundCode || '')
const searchCode = ref(fundCode.value)
const exampleCodes = ['000746', '019457', '015642']
const isLoading = ref(false)
const fund = ref(null)
const isServiceDialogVisible = ref(false)
const userQuestion = ref('')
const selectedQuestion = ref('')

// 返回列表页
const goBack = () => {
  router.push({ name: 'home' })
}

// 本地模式
const localMode = () => {
  router.push({ name: 'home' })
}

// 搜索基金
const searchFund = () => {
  if (!searchCode.value) return
  router.push({ name: 'fund-score-card', params: { fundCode: searchCode.value } })
}

// 显示客服弹窗
const showCustomerServiceDialog = () => {
  isServiceDialogVisible.value = true
}

// 隐藏客服弹窗
const hideCustomerServiceDialog = () => {
  isServiceDialogVisible.value = false
}

// 选择快速问题选项
const selectOption = (option) => {
  selectedQuestion.value = option
  userQuestion.value = option
}

// 发送问题
const sendQuestion = () => {
  if (userQuestion.value.trim()) {
    selectedQuestion.value = userQuestion.value
    userQuestion.value = ''
  }
}

// 根据分数获取评分类型
const getScoreType = (score) => {
  if (score >= 80) return '稳健型'
  if (score >= 70) return '平庸型'
  if (score >= 60) return '不稳定'
  if (score >= 40) return '差月光'
  return '极差型'
}

// 获取基金详情
const fetchFundDetail = async () => {
  if (!fundCode.value) return
  
  isLoading.value = true
  try {
    // 模拟API调用
    // 正式环境中应替换为实际API请求
    setTimeout(() => {
      fund.value = {
        code: fundCode.value,
        name: '景顺长城景颐丰利债券A',
        type: '股票型基金',
        manager: '杨锐璟',
        size: '12.83亿元',
        establishDate: '2017-01-18',
        score: 84
      }
      isLoading.value = false
    }, 500)
  } catch (error) {
    console.error('获取基金详情失败:', error)
    isLoading.value = false
  }
}

onMounted(() => {
  fetchFundDetail()
})
</script>

<style scoped>
.fund-scorecard-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 页面顶部 */
.page-header {
  background: url('../assets/背景图.png');
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.8);
  background-blend-mode: overlay;
  padding: 15px 0;
  color: white;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-icon {
  width: 40px;
  height: 40px;
}

.main-title {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
}

/* 页面内容 */
.page-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* 返回导航 */
.back-nav {
  padding: 15px 0 0 0;
  margin-bottom: 10px;
}

.back-button {
  display: inline-flex;
  align-items: center;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.back-arrow {
  margin-right: 5px;
  font-size: 18px;
  line-height: 1;
}

.back-button:hover {
  color: #3b82f6;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin-top: 10px;
}

/* 主容器 */
.main-container {
  display: flex;
  gap: 20px;
  margin-top: 5px;
}

/* 左侧菜单 */
.left-menu {
  width: 200px;
  flex-shrink: 0;
}

.fund-code-panel {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
}

.code-number {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.fund-name {
  font-size: 14px;
  color: #333;
  margin: 5px 0;
}

.fund-type {
  display: inline-block;
  font-size: 12px;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 2px;
  color: #666;
}

.menu-tabs {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.menu-tab {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.menu-tab:last-child {
  border-bottom: none;
}

.menu-tab.active {
  background-color: #e8f4ff;
  color: #3b82f6;
}

.tab-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

/* 右侧内容区 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 基本信息区域 */
.info-section {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.section-title {
  margin: 0;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: normal;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.info-table {
  padding: 15px;
}

.info-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 20px;
  margin-bottom: 10px;
  align-items: center;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-size: 14px;
}

/* 评分区域 */
.score-section {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.score-overview {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40px;
}

.star-rating {
  display: flex;
  margin-bottom: 5px;
}

.star {
  color: #ddd;
  font-size: 20px;
}

.star.filled {
  color: #ffa500;
}

.fund-type-label {
  font-size: 13px;
  color: #ff8c00;
}

.score-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40px;
}

.total-score {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.score-label {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.score-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sub-score {
  display: flex;
  align-items: center;
}

.score-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-right: 10px;
  min-width: 40px;
}

.score-type {
  font-size: 14px;
  color: #666;
}

/* 能力分析区域 */
.abilities-section {
  display: flex;
  padding: 10px;
}

.radar-chart-container {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ff8c00;
  font-size: 14px;
}

.abilities-content {
  flex: 1;
  margin-left: 20px;
}

.ability-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}

.ability-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ability-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}

.ability-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.profit {
  background-color: #ff8c00;
}

.risk {
  background-color: #f59e0b;
}

.stability {
  background-color: #10b981;
}

.ability-name {
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.ability-warning {
  margin-left: 5px;
  color: #f59e0b;
}

.ability-stars {
  margin-left: auto;
  display: flex;
}

.ability-stars .star {
  font-size: 12px;
}

.ability-details {
  margin-left: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
  color: #666;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-left {
  flex: 1;
}

.detail-right {
  color: #ff8c00;
}

/* 客服图标 */
.customer-service {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  cursor: pointer;
}

.service-icon-container {
  width: 70px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.customer-service img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.service-label {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
  white-space: nowrap;
  text-align: center;
}

/* 客服弹窗样式 */
.service-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
}

.service-dialog-content {
  background-color: white;
  box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 380px;
  animation: slideInRight 0.3s;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

.service-dialog-header {
  background-color: #87ceeb;
  color: white;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-dialog-title {
  display: flex;
  align-items: center;
}

.service-dialog-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.service-dialog-close {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.service-dialog-body {
  padding: 15px;
  flex: 1;
  overflow-y: auto;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chat-message {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 15px;
}

.chat-message-ai {
  background-color: #f0f9ff;
  align-self: flex-start;
  border-top-left-radius: 0;
}

.chat-message-user {
  background-color: #e1f3d8;
  align-self: flex-end;
  border-top-right-radius: 0;
}

.service-quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 15px 10px;
}

.quick-option {
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 15px;
  font-size: 13px;
  cursor: pointer;
  color: #666;
  border: 1px solid #e8e8e8;
  transition: all 0.2s;
}

.quick-option:hover {
  background-color: #e8f5ff;
  color: #4b97d8;
  border-color: #cce7ff;
}

.quick-option.active {
  background-color: #e8f5ff;
  color: #4b97d8;
  border-color: #cce7ff;
}

.service-dialog-footer {
  display: flex;
  border-top: 1px solid #eee;
  padding: 10px 15px;
}

.service-dialog-footer input {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 10px;
  margin-right: 10px;
}

.service-dialog-footer button {
  background-color: #87ceeb;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-container {
    flex-direction: column;
  }
  
  .left-menu {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .fund-code-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
  }
  
  .menu-tabs {
    display: flex;
  }
  
  .menu-tab {
    flex: 1;
    justify-content: center;
    border-bottom: none;
    border-right: 1px solid #f0f0f0;
  }
  
  .menu-tab:last-child {
    border-right: none;
  }
  
  .abilities-section {
    flex-direction: column;
    align-items: center;
  }
  
  .radar-chart-container {
    margin-bottom: 20px;
  }
  
  .abilities-content {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .score-overview {
    flex-direction: column;
    align-items: center;
  }
  
  .score-left, .score-center {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .score-right {
    width: 100%;
    gap: 15px;
  }
  
  .service-dialog-content {
    width: 320px;
  }
  
  .info-row {
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 576px) {
  .service-dialog-content {
    width: 100%;
  }
}
</style> 